import React, { useState, useEffect } from 'react';
import Store from "./../store/store"
import * as actions from './../store/actions'
const UserViews = () => {
  const [list, setList] = useState(Store.getState().b.users)
  // console.log(list);
  useEffect(() => {
    let unSubscribe = Store.subscribe(() => {

      setList(Store.getState().b.users)
    });

    return () => {
      unSubscribe();
    };
  })

  useEffect(() => {
    Store.dispatch(actions.fetchUser())
  }, [])
  const addUserHandler = () => {
    let obj = { uid: list.length + 1, uname: '香瑞', uage: 21 }
    Store.dispatch(actions.addUser(obj))
  }

  const delUserHandler = () => {
    Store.dispatch(actions.delUser())
  }
  return (
    <div>
      <h1>用户列表</h1>
      <ul>
        {list.map(el => {
          return (<li key={el.uid}>{el.uname} ---- {el.uage}</li>)
        })}
      </ul>
      <div>
        <button type='button' onClick={() => {
          addUserHandler()
        }}>添加用户</button>
      </div>
      <div>
        <button type='button' onClick={() => {
          delUserHandler()
        }}>删除末尾的用户</button>
      </div>
      <div>
        <button type='button' onClick={() => {
          delUserHandler()
        }}>action的异步</button>
      </div>
    </div>
  );
}

export default UserViews;
